<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('会员列表')"/>
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="member-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <p style="width: 90px;">手机号：</p>
                            <input type="text" name="phone"/>
                        </li>
                        <li>
                            <p style="width: 90px;">昵称：</p>
                            <input type="text" name="nickname"/>
                        </li>
                        <li>
                            <p style="width: 90px;">油品型号：</p>
                            <select name="productId" th:with="petrolTypeList=${petrolTypeList}">
                                <option value="">全部</option>
                                <option th:each="type:${petrolTypeList}" th:value="${type.productId}"
                                        th:text="${type.productName}"></option>
                            </select>
                        </li>
<!--                        <li class="select-time">-->
<!--                            <p style="width: 90px;">积分区间：</p>-->
<!--                            <input type="number" min="0" placeholder="大于等于"-->
<!--                                   name="params[beginCredit]"/>-->
<!--                            <span>-</span>-->
<!--                            <input type="number" min="0" placeholder="小于等于"-->
<!--                                   name="params[endCredit]"/>-->
<!--                        </li>-->
                        <li class="select-time">
                            <p style="width: 90px;">余额区间：</p>
                            <input type="number" min="0" placeholder="大于等于"
                                   name="params[beginBalance]"/>
                            <span>-</span>
                            <input type="number" min="0" placeholder="小于等于"
                                   name="params[endBalance]"/>
                        </li>
                        <li class="select-time">
                            <p style="width: 90px;">累计充值：</p>
                            <input type="number" min="0" placeholder="大于等于"
                                   name="params[beginTR]"/>
                            <span>-</span>
                            <input type="number" min="0" placeholder="小于等于"
                                   name="params[endTR]"/>
                        </li>
                        <li class="select-time">
                            <p style="width: 90px;">注册时间：</p>
                            <input type="text" class="time-input" placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>
                        <li class="select-time">
                            <p style="width: 130px;">累计加油(微信支付)：</p>
                            <input type="number" min="0" placeholder="大于等于"
                                   name="params[beginTP]"/>
                            <span>-</span>
                            <input type="number" min="0" placeholder="小于等于"
                                   name="params[endTP]"/>
                        </li>
                        <li class="select-time">
                            <p style="width: 130px">最后一次消费时间： </p>
                            <input type="text" class="time-input" style="width: 150px;" data-type="datetime"
                                   placeholder="开始时间"
                                   name="params[beginTime1]"/>
                            <span>-</span>
                            <input type="text" class="time-input" style="width: 150px;" data-type="datetime"
                                   placeholder="结束时间"
                                   name="params[endTime1]"/>
                        </li>
                        <li class="select-time">
                            <p style="width: 130px">消费频率： </p>
                            <input type="text" class="time-input" style="width: 150px;" data-type="datetime"
                                   placeholder="开始时间"
                                   name="params[beginTime2]"/>
                            <span>-</span>
                            <input type="text" class="time-input" style="width: 150px;" data-type="datetime"
                                   placeholder="结束时间"
                                   name="params[endTime2]"/>
                            <input type="number" min="0" placeholder="大于等于"
                                   name="params[beginTP2]"/>
                            <span>-</span>
                            <input type="number" min="0" placeholder="小于等于"
                                   name="params[endTP2]"/>
                        </li>
                        <li class="select-selectpicker">
                            <p style="width: 80px">会员标签： </p>
                            <select id="labelIdStr" th:with="labels=${labelList}" class="selectpicker" data-none-selected-text="请选择" multiple>
                                <option th:each="one : ${labels}" th:text="${one.labelName}" th:value="${one.id}"></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <!--<a class="btn btn-warning multiple disabled" onclick="exportSelect()">-->
            <!--<i class="fa fa-download"></i> 选择导出-->
            <!--</a>-->
<!--            <a class="btn btn-success multiple disabled" shiro:hasPermission="back:shopMember:sendCoupon"-->
<!--               onclick="selectCoupon()">-->
<!--                <i class="fa fa-ticket"></i> 赠送优惠券-->
<!--            </a>-->
<!--            <a class="btn btn-success multiple disabled" shiro:hasPermission="back:shopMember:sendCreditProduct"-->
<!--               onclick="selectProduct()">-->
<!--                <i class="fa fa-gift"></i> 赠送积分商品-->
<!--            </a>-->
<!--            <a class="btn btn-success multiple disabled" shiro:hasPermission="back:shopMember:sendSms"-->
<!--               onclick="selectSms()">-->
<!--                <i class="fa fa-comment-o"></i> 发送推广短信-->
<!--            </a>-->
<!--            <a class="btn btn-success single disabled" shiro:hasPermission="back:shopMemberLabel:link"-->
<!--               onclick="linkMemberLabel()">-->
<!--                <i class="fa fa-flag-o"></i> 设置标签-->
<!--            </a>-->
            <a class="btn btn-danger single disabled" shiro:hasPermission="back:shopMember:recharge"
               onclick="recharge()">
                <i class="fa fa-cny"></i> 充值
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
    var prefix = ctx + "back/shopMember";
    var changeCreditFlag = [[${@permission.hasPermi('back:shopMember:editCredit')}]];
    var changeBalanceFlag = [[${@permission.hasPermi('back:shopMember:editBalance')}]];
    var customBenefitFlag = [[${@permission.hasPermi('back:shopMember:customList')}]];
    var linkListFlag = [[${@permission.hasPermi('back:shopMember:linkList')}]];
    $(function () {
        var options = {
            url: prefix + "/list",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "会员",
            height: 600,
            sortName: "createTime",
            queryParams: queryParams,
            sortOrder: "desc",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: "ID",
                    sortable: true
                },
                {
                    field: 'vipTypeName',
                    title: "会员等级",
                    formatter: function (value, row, index) {
                        var actions = [];
                        // if (1 == row.isCustomBenefit) {
                        //     actions.push('<br/><a class="btn btn-warning btn-xs ' + customBenefitFlag + '" href="#" onclick="configCustomBenefit(\'' + row.id + '\')">查看独享折扣</a>');
                        // } else {
                            actions.push('<span>' + value + '</span>');
                            // actions.push('<br/><a class="btn btn-primary btn-xs ' + customBenefitFlag + '" href="#" onclick="configCustomBenefit(\'' + row.id + '\')">设置独享折扣</a>');
                        // }
                        return actions.join('');
                    },
                    sortable: true
                },
                {
                    field: 'nickname',
                    title: '昵称',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(row.labelNames != null && row.labelNames != ''){
                            var labelNamesArr = row.labelNames.split(',');
                            for (var i=0;i<labelNamesArr.length;i++) {
                                actions.push('<button type="button" class="btn btn-success btn-xs" style="margin: 2px;">'+labelNamesArr[i]+'</button>');
                            }
                            actions.push('<br/>');
                        }
                        actions.push('<span>' +  value + '</span>');
                        return actions.join('');
                    },
                },
                {
                    field: 'avatar',
                    title: '头像',
                    formatter: function (value, row, index) {
                        return $.common.sprintf("<img class='img-circle img-sm' data-height='%s' data-width='%s' data-target='%s'  style='border-radius: 0;' src='%s'/>", 500, 'auto', 'self', value);
                    }
                },
                {
                    field: 'phone',
                    title: '手机号',
                },
                {
                    field: 'credit',
                    title: '积分',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a href="#" onclick="showLinkList(5,\'' + row.id + '\')">' + value + '</a>');
                        return actions.join('');
                    },
                    visible: false,
                    sortable: true,
                },
                {
                    field: 'balance',
                    title: '余额',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a href="#" onclick="showLinkList(6,\'' + row.id + '\')">' + value + '</a>');
                        return actions.join('');
                    },
                    sortable: true,
                },
                {
                    field: 'totalRechargeAmount',
                    title: '累计充值',
                    formatter: function (value, row, index) {
                        if (0 == value) {
                            return value;
                        }
                        var actions = [];
                        actions.push('<a href="#" onclick="showLinkList(3,\'' + row.id + '\')">' + value + '</a>');
                        return actions.join('');
                    },
                    sortable: true,
                },
                {
                    field: 'totalPetrolAmount',
                    title: '累计加油（微信支付）',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a href="#" onclick="showLinkList(2,\'' + row.id + '\')">' + value + '</a>');
                        return actions.join('');
                    },
                    sortable: true,
                },
                {
                    field: 'lastConsumeTime',
                    title: '上次支付时间',
                    sortable: true
                },
                {
                    field: 'createTime',
                    title: '注册时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        // actions.push('<a class="btn btn-warning btn-xs ' + changeCreditFlag + '" href="#" onclick="changeCredit(\'' + row.id + '\')"><i class="fa fa-money">积分调整</i></a>');
                        actions.push('<br/><a class="btn btn-danger btn-xs ' + changeBalanceFlag + '" href="#" onclick="changeBalance(\'' + row.id + '\')">余额调整</a>');
                        // actions.push('<br/><a class="btn btn-primary btn-xs ' + linkListFlag + '" href="#" onclick="showLinkList(1,\'' + row.id + '\')"><i class="fa fa-search">已领优惠券列表</i></a>');
                        // actions.push('<br/><a class="btn btn-success btn-xs ' + linkListFlag + '" href="#" onclick="showLinkList(4,\'' + row.id + '\')"><i class="fa fa-search">已兑换商品列表</i></a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function changeCredit(memberId) {
        var url = ctx + 'back/shopMember/editCredit/' + memberId;
        $.modal.open("积分调整", url);
    }

    function changeBalance(memberId) {
        var url = ctx + 'back/shopMember/editBalance/' + memberId;
        $.modal.open("余额调整", url);
    }

    function recharge() {
        var row = $("#bootstrap-table").bootstrapTable('getSelections')[0];
        if ($.common.isEmpty(row)) {
            $.modal.alertWarning("请选择一个会员帐号进行充值");
            return;
        }
        var url = ctx + 'back/shopMember/recharge/' + row.id;
        var options = {
            title: '后台会员充值',
            width: "800",
            height: "500",
            skin: 'layui-layer-gray',
            url: url,
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        };
        $.modal.openOptions(options);
    }


    //选择数据导出
    // function exportSelect() {
    //     var rows = $.table.selectFirstColumns();
    //     if (rows.length == 0) {
    //         $.modal.alertWarning("请至少选择一条记录");
    //         return;
    //     }
    //     $.modal.confirm("确认要导出的" + rows.length + "条数据吗？", function () {
    //         var data = {};
    //         if (rows.length === 1) {
    //             data.memberId = rows[0];
    //         } else {
    //             data.memberIdStr = rows.join()
    //         }
    //         $.modal.loading("正在导出数据，请稍后...");
    //         $.post(prefix + "/export", data, function (result) {
    //             if (result.code == web_status.SUCCESS) {
    //                 window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
    //             } else if (result.code == web_status.WARNING) {
    //                 $.modal.alertWarning(result.msg)
    //             } else {
    //                 $.modal.alertError(result.msg);
    //             }
    //             $.modal.closeLoading();
    //         });
    //     });
    // }


    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.labelIdStr = $.common.join($('#labelIdStr').selectpicker('val'));
        return search;
    }

    function searchPre() {
        $.table.search('member-form', 'bootstrap-table');
    }

    function resetPre() {
        $("#member-form")[0].reset();
        $("#labelIdStr").selectpicker('refresh');
        $.table.search('member-form', 'bootstrap-table');
    }


    function selectCoupon() {
        var rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一名受赠会员");
            return;
        }
        var url = prefix + "/selectCoupon/" + $.table.selectFirstColumns().join();
        $.modal.open("选择赠送的优惠券", url, 1000);
    }

    function selectProduct() {
        var rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一名受赠会员");
            return;
        }
        var url = prefix + "/selectCreditProduct/" + $.table.selectFirstColumns().join();
        $.modal.open("选择赠送的积分商品", url, 1000);
    }

    function selectSms() {
        var rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一名接受短信的会员");
            return;
        }
        var url = prefix + "/selectSmsTemplate/" + $.table.selectFirstColumns().join();
        $.modal.open("选择推广短信模板", url, 1000);
    }

    function linkMemberLabel(memberId) {
        var row = $("#bootstrap-table").bootstrapTable('getSelections')[0];
        if ($.common.isEmpty(row)) {
            $.modal.alertWarning("请选择一个会员进行设置");
            return;
        }
        var url = ctx + "back/shopMemberLabel/link/" + row.id;
        $.modal.open("设置会员标签", url, 1000);
    }

    function configCustomBenefit(memberId) {
        var url = ctx + "back/shopMemberVipBenefit/customList/" + memberId;
        var options = {
            title: '设置会员独享折扣',
            width: "1000",
            skin: 'layui-layer-gray',
            url: url,
            btn: ['<i class="fa fa-close"></i> 关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        };
        $.modal.openOptions(options);
    }

    function showLinkList(type, memberId) {
        var title = "";
        switch (type) {
            case 1:
                title = "会员优惠券列表";
                break;
            case 2:
                title = "会员加油订单列表";
                break;
            case 3:
                title = "会员充值订单列表";
                break;
            case 4:
                title = "会员积分兑换订单列表";
                break;
            case 5:
                title = "会员积分记录列表";
                break;
            case 6:
                title = "会员余额记录列表";
                break;
            default:
                break;
        }
        if ('' != title) {
            var url = ctx + 'back/shopMember/linkList/' + type + '/' + memberId;
            var options = {
                title: title,
                width: "1000",
                skin: 'layui-layer-gray',
                url: url,
                btn: ['<i class="fa fa-close"></i> 关闭'],
                yes: function (index, layero) {
                    $.modal.close(index);
                }
            };
            $.modal.openOptions(options);
        }
    }
</script>
</body>
</html>